<template>
    <el-button type="primary" @click="open">
        <slot></slot>
    </el-button>
    <div class="container11111">
        <el-dialog :title="dialogTitle" v-model="_visable">
            <div class="container">
                <div class="item" v-for="(item, index) in Object.keys(ElementPlusIconsVue)" :key="index" @click="clickItem(item)">
                    <div>
                        <component :is="`el-icon-${toLine(item)}`"></component>
                    </div>
                    <div>{{ item }}</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { toLine } from "@/utils/index.ts"
import {useCopy} from "@/hooks/useCopy/index.ts"
// const props=defineProps({
//     visible:Boolean,
//     dialogTitle:String
// })
import { ref, computed, watch } from 'vue'
//let _visable=ref<boolean>(false)
const props = defineProps<{
    visible: boolean,
    dialogTitle: string
}>()
// let _visable=computed(()=>{
//     return props.visible
// })
let _visable = ref(props.visible)

const emit = defineEmits(['update:visible'])
const open = () => {
    //console.log("open" + props.visible)
    emit('update:visible', !props.visible)
}
// const close=()=>{
//     console.log("close"+props.visible)
//     emit('update:visible',!props.visible)
// }
//该方法能监听到在任意情况下关闭时的数据
watch(_visable, (val) => {
    //console.log("emit" + val)
    emit('update:visible', val)
})
//时刻监听父组件的值过来后修改本地的值
watch(() => props.visible, (val) => {
    _visable.value = val
    //console.log("watch" + val)
    //emit('update:visible',val)
})

const clickItem=(val:string)=>{
    useCopy(`<el-icon-${toLine(val)} />`)
    _visable.value = false
}
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        cursor: pointer;

        svg {
            width: 2em;
            height: 2em;
        }
    }


}


</style>
